<template>
    <div class="total">
        <div class="set">
            <div class="ti">商品管理</div>
            <button class="tj" @click="add"><i class="fa fa-plus" aria-hidden="true"></i> 商品添加</button>
            <button class="tj" @click="tocategory"><i class="fa fa-th" aria-hidden="true"></i>  分类管理</button>
            <button class="qh" @click="change"><i class="fa fa-circle-o-notch" aria-hidden="true"></i> 切换查看</button>

        </div>
        <div :class="zs" >
            
        
            <div class="goodlist">
                <div v-for="(good, m) in goods" v-bind:key="m" :class="goods1">
                    <img v-bind:src="good.imgurl" style="height: 140px;width: 140px;margin-top:10px">
                    <div :class="d1">
                        <i class="fa fa-jpy"></i>{{good.price}}<br>
                        {{good.goodsname}}
                    </div>
                    <div :class="d2" style="text-align: center;margin-top: 10px;">
                        <button style="border:0; background-color:bisque;">
                        <i class="fa fa-pencil" v-on:click="add" style="font-size: large;"></i> 
                        </button> 
                        <a> <i class="fa fa-trash" v-on:click="deletegood(m)" style="font-size: large;"></i></a>  
                    </div>
                </div>
            </div>
            <div class="buttom" v-on:click="move(0)">
                <div class="subs"><i class="fa fa-chevron-left"></i></div>
                <div class="subs">1</div>
                <div class="subs"><i class="fa fa-chevron-right"></i></div>
            </div>
        </div>
        
        <div :class="zs1">
            <ag></ag>
        </div>
        <div :class="zs2">
            <cg></cg>
        </div>
    </div>
</template>
<script>   
module.exports = {
    data(){
        let localgoods = JSON.parse(localStorage.getItem("goods"));
        return {
            zs:"zs",
            zs1:"none",
            zs2:"none",
            d1:"",
            d2:"",
            goods1 :"goods1",
            goods:localgoods
        }
    },
    methods: {

        add(){
            this.zs = "none";
            this.zs1 = "zs";
            this.zs2 = "none";
        },
        change(){
            if(this.goods1 == "goods1"){
                this.goods1 = "goods2";
                this.d1 = "d1";
                this.d2 = "d2";
            }else if(this.goods1 == "goods2"){
                this.goods1 = "goods1";
                this.d1 = "";
                this.d2 = "";
            }
            
        },
        tocategory(){
            this.zs = "none";
            this.zs1 = "none";
            this.zs2 = "zs";
        },

        deletegood(m) {
            let localcategorys = JSON.parse(localStorage.getItem("categorys"));
            let localgoods = JSON.parse(localStorage.getItem("goods"));
            for (i in localgoods) {
                if (i*1 === m) {
                    console.log(localgoods[i].category)
                    for (j in localcategorys) {
                        
                        if (localgoods[i].category === localcategorys[j].categoryname) {
                            console.log(localcategorys[j].categoryname)
                            localcategorys[j].goodsmount -= 1
                        }
                    }
                    localgoods.splice(i,1)
                }
            }
            localStorage.setItem("categorys", JSON.stringify(localcategorys));
            localStorage.setItem("goods", JSON.stringify(localgoods));
            this.$forceUpdate();
            window.location.reload();
        },
        edit(m) {

        }
    }
}
</script>

<style scoped>
.total{
    position: absolute;
    height: 90%;
    width: 85%;
}
    .set{
    line-height: 80px;
    height: 80px;
    width: 100%;
    background-color: rgb(235, 218, 203);
}
.none{
    display: none;
}
.ti{
    display: inline-block;
    text-align: center;
    line-height: 80px;
    height: 80px;
    width: 10%;

}
.tj{
    height: 80px;
    width: 10%;
    border: 0;
    font-size: larger;
    background-color: rgb(235, 218, 203);
}
.qh{
    height: 80px;
    width: 10%;
    border: 0;
    font-size: larger;
    margin-left: 58%;
    background-color: rgb(235, 218, 203);
}
.zs{
    height: 90%;
    width: 85%;
    border: 0;
    font-size: larger;
    background-color: rgb(235, 218, 203);
}

    .goodlist{
        /* float: left;
        margin-top: 2%;
        margin-left: 4%; */
        position: absolute;
        height: 90%;
        width: 100%;

        
    }
    .goods1 {
        float: left;
        text-align: center;
        margin-top: 2%;
        margin-left: 6%; 
        width:18%;
        height: 40%;
        border-radius: 6px;
        background-color: bisque;
    }
    .goods2{
        float: left;
        margin-top: 1%;
        margin-left: 3%;
        height: 27%;
        width: 100%;
        background-color: bisque;
    }

    .d1{
        /* float: left; */
        position: absolute;
        
        display: inline-block;
    }

    .d2{
        top: 100px;
        display: inline-block;
    }

    .goodlist img {
        width: 90px;
        height: 90px;
    }
    .goodlist .goodone div:first-child {
        text-align: left;
    }
    .goodlist .goodone div:last-child {
        text-align: right;
        border: 5px;
        padding-right: 10px;
    }
    .buttom{
        position: absolute;
        width: 100%;
        top: 95%;
        left: 50px;
        display: flex;
        justify-content: center;
    }
    .buttom .subs{
        width: 20px;
        height: 20px;
        border: 1px solid silver;
        text-align: center;
        margin: 0px 10px;
    }
</style>   